<template>
	<!-- 点击按钮变大 -->
	  <div :style="{ fontSize: postFontSize + 'em' }">
	    <blog-post
	       v-for="post in posts"
	       :key="post.id"
	       :title="post.title"
					@enlarge-text="onEnlargeText"
	    ></blog-post>
			<!--
				@enlarge-text="postFontSize += $event"
				@enlarge-text="onEnlargeText"
			-->
	  </div>

	<el-divider>参数类型提示</el-divider>
	<!-- 参数类型提示 -->
		<data-style :title="data.str" :likes="data.ing" :propC="data.bc">刘赫</data-style>
		
	<ChaCao>
		<template v-slot:header>
			<h1>Here might be a page title</h1>
		</template>
	
		<template v-slot:default>
			<p>A paragraph for the main content.</p>
			<p>And another one.</p>
		</template>
	
		<template v-slot:footer>
			<p>Here's some contact info</p>
		</template>
	</ChaCao>
	
	<Demo :liuhe="liuhe" @click="lhclick">拉拉</Demo>
		{{liuhe}}
		
	<LianXi title="'这是标题呢'">你好</LianXi>
	<lian-xi>火花</lian-xi>
</template>

<script>
	// 点击按钮变大
	const blogPost = {
		props: ['title'],
		template: `
			<div class="blogpost">
				<h4>{{ title }}</h4>
				<button @click="$emit('enlarge-text', 0.5)">
					Enlarge text
				</button>
			</div>
		`
	};
	// 参数类型提示
	const dataStyle = {
		props: {  // https://v3.cn.vuejs.org/guide/component-props.html#prop-验证
				title: String,
				likes: Number,
				isPublished: Boolean,
				commentIds: Array,
				author: Object,
				callback: Function,
				contactsPromise: Promise, // 或任何其他构造函数
		    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
		    propA: Number,
		    // 多个可能的类型
		    propB: [String, Number],
		    // 必填的字符串
		    propC: {
		      type: String,
		      required: true
		    },
		    // 带有默认值的数字
		    propD: {
		      type: Number,
		      default: 100
		    },
		    // 带有默认值的对象
		    propE: {
		      type: Object,
		      // 对象或数组默认值必须从一个工厂函数获取
		      default() {
		        return { message: 'hello' }
		      }
		    },
		    // 自定义验证函数
		    propF: {
		      validator(value) {
		        // 这个值必须匹配下列字符串中的一个
		        return ['success', 'warning', 'danger'].includes(value)
		      }
		    },
		    // 具有默认值的函数
		    propG: {
		      type: Function,
		      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
		      default() {
		        return 'Default function'
		      }
		    }
		  },
		computed: {  // https://v3.cn.vuejs.org/guide/component-props.html#单向数据流
		  normalizedSize() {
		    return this.title.trim().toLowerCase()
		  }
		},
		data() {
		  return {
		    counter: this.title
		  }
		},
		template: `
			<div>
				- {{title}} - {{likes}}
			</div>
		`
	}
		
	export default {
		components:{
			'blog-post': blogPost,
			'data-style': dataStyle,
		},
		data(){
			return {
				liuhe: '你好',
				posts: [
					{ id: 1, title: '没用'},
				],
				postFontSize: 1,
				data: {
					str: '字符串',
					ing: 123,
					boolean: true,
					bc: '必穿'
				}
			}
		},
		methods: {
			lhclick(res){
				console.log('次点击了我')
			},
			onEnlargeText(enlargeAmount) {
				this.postFontSize += enlargeAmount
			}
		}
	}
</script>

<style>
	.demo {
	  font-family: sans-serif;
	  border: 1px solid #eee;
	  border-radius: 2px;
	  padding: 20px 30px;
	  margin-top: 1em;
	  margin-bottom: 40px;
	  user-select: none;
	  overflow-x: auto;
	}
</style>
